<template>
  <a-spin :spinning="loading">
    <a-card>
      <a-alert class="mb-24" :message="meassage" type="info" show-icon />
      <a-row class="mb-30 mt-20" :gutter="24">
        <a-col :span="8">
          <section v-if="$permissionJudge('CancelStrategyAdd')" class="oneDiv" @click="$refs.addCancelPolicy.open((Canceltype = 2))">
            <section class="title">+ 新增预定取消政策</section>
          </section>
        </a-col>
        <div v-for="item in cancelStrategydata" :key="item.id">
          <a-col :span="8">
            <section class="info-item bg3">
              <section class="title">
                <a-icon class="icon" type="container" /> <span class="headline">{{ item.name }}</span>
                <span class="vipline">{{ item.typename }}</span>
              </section>
              <section class="count">{{ item.desc }}</section>
              <section class="line"></section>
              <section class="all-count" v-if="$permissionJudge('CancelStrategyUpdate')">
                <p class="leftbd" @click="$refs.addCancelPolicy.open((Canceltype = 1), item)">更新政策</p>
              </section>
            </section>
          </a-col>
        </div>
      </a-row>
    </a-card>
    <AddCancelPolicy ref="addCancelPolicy" @success="success" :cancelStrategydata="cancelStrategydata" />
  </a-spin>
</template>

<script>
import { list, deleteRule } from '@/api/cancel-policy'
import AddCancelPolicy from './components/AddCancelPolicy.vue'

export default {
  components: { AddCancelPolicy },
  props: {},
  data() {
    return {
      loading: false,
      // meassage: '此处列举了所有的平台已配置的取消预定政策，供合作供应商选择使用',
      meassage: '此处列举了所有的平台已配置的取消预定政策，供服务商选择使用',
      cancelStrategydata: [],
      typeList: [],
    }
  },
  computed: {},
  watch: {},
  created() {
    // this.$utils.getDictList('CancelStrategyType').then((res) => {
    //   //取消规则类型
    //   this.typeList = res
    //   console.log(this.typeList);
    // })
    this.$nextTick(() => {
      this.getcancelStrategyList()
    })
  },
  mounted() {},
  destroyed() {},
  methods: {
    getcancelStrategyList() {
      this.loading = true
      this.getgetDictList()
      list()
        .then((data) => {
          console.log(data)
          this.typeList.map((v) => {
            data.map((j) => {
              if (v.value == j.type) {
                j.typename = v.name
              }
            })
          })
          this.cancelStrategydata = data
          console.log(this.cancelStrategydata)
        })
        .finally(() => (this.loading = false))
    },
    getgetDictList() {
      this.$utils.getDictList('CancelStrategyType').then((res) => {
        //取消规则类型
        this.typeList = res
      })
    },
    delCancelPolicy(id) {
      console.log(id)
      this.$confirm({
        title: '提示',
        content: '请确认是否删除此取消政策？',
        okText: '确定',
        okType: 'danger',
        cancelText: '取消',
        onOk: () => {
          this.loading = true
          deleteRule({ id: id })
            .then(() => {
              this.loading = false
              this.getcancelStrategyList()
              this.$message.success('删除政策成功！')
            })
            .finally(() => (this.loading = false))
        },
      })
    },
    success() {
      this.getcancelStrategyList()
    },
  },
}
</script>
<style scoped lang='less'>
.flex {
  display: flex;
  align-items: center;
}

.info-item {
  padding: 18px 20px;
  -webkit-background-size: cover;
  background-size: cover;
  border-radius: 10px;
  //   cursor: pointer;
  .icon {
    font-size: 20px;
  }
  .headline {
    font-size: 18px;
    color: #333333;
    font-weight: 700;
    margin: 0px 5px;
  }
  .vipline {
    font-size: 13px;
    padding: 1px 4px;
    background-color: rgba(2, 167, 240, 1);
    color: #fff;
    border-radius: 4px;
  }
  &.bg1 {
    background-image: url(~@/assets/bg1.png);
    box-shadow: 0px 8px 24px 0px rgba(254, 140, 5, 0.2);
  }

  &.bg2 {
    background-image: url(~@/assets/bg2.png);
    box-shadow: 0px 8px 24px 0px rgba(17, 176, 46, 0.2);
  }

  &.bg3 {
    box-shadow: 0px 8px 24px 0px rgba(17, 17, 17, 0.034);
    background-color: #ffff;
  }

  &.bg4 {
    background-image: url(~@/assets/bg4.png);
    box-shadow: 0px 8px 24px 0px rgba(34, 34, 36, 0.034);
  }

  .count {
    margin: 24px 0 18px 20px;
    color: #7f7f7f;
    text-align: left;
    font-weight: 400;
    font-style: normal;
    font-size: 13px;
    cursor: pointer;
  }

  .info {
    .flex;
    display: inline-flex;
    justify-content: center;
    padding: 0 10px;
    height: 28px;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 14px;
  }

  .line {
    margin: 20px 0;
    height: 1px;
    background-color: #eee;
  }
}
.oneDiv {
  background: #eee;
  border-radius: 8px;
  height: 225px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 24px;
  font-size: 16px;
  border: 1px dashed #d7d7d7;
  cursor: pointer;
}
.all-count {
  display: flex;
  justify-content: center;
  align-items: center;
  .leftbd {
    cursor: pointer;
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #02a7f0;
    font-size: 14px;
  }
}
</style>
